<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:href="@{/images/userLog1.png}"  sizes="90x90" type="image/x-icon" rel="icon">
    <link th:href="@{/frontstatic/css/iconfont.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/global.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/bootstrap-theme.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/swiper.min.css}" rel="stylesheet">
    <link th:href="@{/frontstatic/css/styles.css}" rel="stylesheet">
    <script charset="utf-8" th:src="@{/lib/layui-v2.6.3/layui.js}"></script>
    <link media="all" rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}">
    <script charset="utf-8" th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/bootstrap.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/swiper.min.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/global.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/jquery.DJMask.2.1.1.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify.js}"></script>
    <script charset="UTF-8" th:src="@{/frontstatic/js/notify_stand.js}"></script>
    <script th:src="@{/js/template-web.js}"></script>
    <title>订单详情</title>
    <style type="text/css">
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
</head>

<body>
<div class="content clearfix bgf5">
    <section class="user-center inner clearfix">
        <div class="pull-left bgf">
            <dl class="user-center__nav">
                <dt>帐户信息</dt>
                <a href="/skippage?url=udai_setting">
                    <dd>个人资料</dd>
                </a>
                <a href="/skippage?url=udai_address">
                    <dd>收货地址</dd>
                </a>
            </dl>
            <dl class="user-center__nav">
                <dt>订单中心</dt>
                <a href="/skippage?url=udai_order">
                    <dd class="active">我的订单</dd>
                </a>
                <a href="/skippage?url=udai_refund">
                    <dd>售后</dd>
                </a>
            </dl>
        </div>
        <div class="pull-right">
            <div class="user-content__box clearfix bgf">
                <div class="title">订单详情<span></span></div>
                <div class="order-info__box">
                    <div class="order-addr" id="address" style="color: #717070"></div>
                    <div class="title" style="margin-top: 30px;color: #717070"><span></span></div>
                    <div class="order-info" id="commtity" style="margin-top: 30px;color: #717070"></div>
                    <div style="height: auto">
                        <table class="layui-table" id="commtitydemo" lay-filter="commtitydemo"></table>
                    </div>
                    <div style="margin-left: 20px;margin-top: 100px" id="trankui"></div>
                    <div class="price-total">
                        <div class="fz12 c9">快递运费 ￥0.0</div>
                        <div class="fz18 c6"id="price">实付款:</div>
                    </div>
                    </div>

                </div>
            </div>
    </section>
</div>
<!-- 右侧菜单 -->
<div class="right-nav">
    <ul class="r-with-gotop">
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_welcome.html">
                <i class="iconfont icon-user" data-badge="0"></i>
                <div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_shopcart.html">
                <i class="iconfont icon-cart"></i>
                <div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="udai_collection.html">
                <i class="iconfont icon-aixin"></i>
                <div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="">
                <i class="iconfont icon-liaotian"></i>
                <div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
            </a>
        </li>
        <li class="r-toolbar-item">
            <a class="r-item-hd" href="issues.html">
                <i class="iconfont icon-liuyan"></i>
                <div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
            </a>
        </li>
        <li class="r-toolbar-item to-top">
            <i class="iconfont icon-top"></i>
            <div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
        </li>
    </ul>
    <script>
        $(document).ready(function () {
            $('.to-top').toTop({position: false})
        });
    </script>
</div>
<script id="addressTemplate" type="text/template">
    <span>收货地址：</span>
    <span>
        {{values.name}}
    </span>
    <span>
        {{values.phone}}
    </span>
    <span>
        {{values.address}}
    </span>
    <span>
        {{values.address}}
    </span>
</script>
<script id="CommtityTemplate" type="text/template">
    <span  style="margin-right: 50px">
       订单编号: {{values.order.orderUuid}}
    </span>
    {{if values.pay!=null}}
    <span style="margin-right: 50px">
       支付宝交易号: {{values.pay.tradeNo}}
    </span>
    <span style="margin-right: 50px">
        订单交易时间: {{values.pay.payTime}}
    </span><br/>
    <span style="margin-right: 50px">
        买家账号: {{values.pay.payA}}
    </span>
    {{/if}}
    <span style="margin-right: 50px">
        订单创建时间: {{values.order.createTime}}
    </span><br/>
    <span style="margin-right: 50px">
        评价等级: {{values.grade}}
    </span><br/>
    <span style="margin-right: 50px">
        评价内容: {{values.text}}
    </span><br/>
</script>
<script id="img" type="text/html">
    <div style="height: 80px;width: 80px">
        <img  src="{{d.image}}">
    </div>
</script>
<script id="priceTemplate" type="text/template">
    <b class="cr" >￥{{values.price}}</b>
</script>
<script id="trackTemplate" type="text/template">
    <div style="width: 600px;height: 80px;margin-top: -40px;color: #787575">
        <img src="{{datebate.logo}}">
        <span style="margin-left: 20px">联系电话:{{datebate.expPhone}}</span>
        <span style="margin-left: 20px">派件联系电话:{{datebate.courierPhone}}</span>
        <span style="margin-left: 20px">物流单号:{{datebate.number}}</span><br/>
        <div style="margin-top: 20px;margin-left: 61px">
            <span style="margin-left: 20px">运输时长:{{datebate.takeTime}}</span>
            <span  style="margin-left: 20px">更新时间:{{datebate.updateTime}}</span>
        </div>
    </div>
    <ul class="layui-timeline" style="margin-top: 100px">
        {{each datebate.list item}}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{{item.time}}</h3>
                <p>{{item.status}}</p>
            </div>
        </li>
        {{/each}}
    </ul>
</script>
<script>
    var notify;
    layui.use(['notify'],function(){
        notify=layui.notify;
    })
    var data = window.location.href.split("&")[1].split("=")[1];
    $.get("/order/byid",{"id":data},function (ex) {
        if (ex.code==0) {
            date = {values: ex.data.address}
            mera = template("addressTemplate", date);
            $("#address").append(mera);
            //订单信息
            date1 = {values: ex.data}
            mera1 = template("CommtityTemplate", date1);
            $("#commtity").append(mera1);
            //价格
            date2 = {values: ex.data.order}
            mera2 = template("priceTemplate", date2);
            $("#price").append(mera2);
        }
        if (ex.data.order.orderStatic!=0&&ex.data.order.orderStatic!=1){
            $.get("/order/getlogistics",{"id":data},function(ex){
                console.log(ex.data.result)
                if (ex.code==0){
                    date = {datebate: ex.data.result}
                    mera = template("trackTemplate", date);
                    $("#trankui").append(mera);
                    notify.success(ex.data.msg)
                }else {
                    notify.error(e.msg)
                }
            })
        }
    })
    layui.use('table', function () {
        var table = layui.table;
        var layer = layui.layer;
        table.render({
            elem: '#commtitydemo'
            , method: 'get'
            , title: '商品数据表'
            ,where:{"id":data}
            , url: '/order/byid' //数据接口
            ,skin:'line'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "data": res.data.orderbyidCommtityPoList//解析数据列表
                };
            }
            , cols: [
                [ //表头
                {field: 'image',templet: '#img'}
                , {field: 'name',width:250}
                , {field: 'sku',width:260}
                    ,{field: 'price'}
                    ,{field: 'count',width:170}
            ]
            ]
        });
    })
</script>
</body>
</html>